<template>
  <div> 
    <div>
      统计方式 :<select name="" id="choose" v-model="type">
        <option value="1">科室</option>
        <option value="2">职称级别</option>
        <option value="3">性别</option>
        <option value="4">年龄</option>
      </select>
    </div>
  <div id="app">
    <div id="main" style="width: 600px; height: 600px"></div>
  </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import { mapMutations } from 'vuex';
export default {
  created(){
     this.getdata() 
  },
  name: "app",
  data(){
      return {
        type:1,
        arr1:[],
        arr2:[],
        list1:[]
      }
  },
  computed:{
       
  },
  methods: {
    ...mapMutations(['setlist']),
    ...mapActions(['tongyong']),
       getdata(){
       this.tongyong({
        name: 'keshirenshu',
        data: {
        },
      }).then(resp => {
        console.log(resp.data.data)
        let newarr=[]
      for(let i=0;i<resp.data.data.length;i++){
        let arr = JSON.stringify(resp.data.data[i]).replace(/sectionName/, 'name').replace(/num/, 'value');
          newarr.push(JSON.parse(arr))
      }
      console.log(newarr)
     this.list1=  JSON.parse(JSON.stringify(newarr))
     console.log(this.list1)
      this.drawChart()
      });
    },
       getzhicheng(){
       this.tongyong({
        name: 'zhichengrenshu',
        data: {
        },
      }).then(resp => {
        console.log(resp.data.data)
        let newarr=[]
      for(let i=0;i<resp.data.data.length;i++){
        let arr = JSON.stringify(resp.data.data[i]).replace(/titleName/, 'name').replace(/num/, 'value');
          newarr.push(JSON.parse(arr))
      }
     this.list1=  JSON.parse(JSON.stringify(newarr))
      console.log(this.list1)
      console.log(JSON.parse(JSON.stringify(newarr)))
      this.drawChart()
      });
    },
       getsex(){
       this.tongyong({
        name: 'sexrenshu',
        data: {
        },
      }).then(resp => {
        console.log(resp.data.data)
        let newarr=[]
      for(let i=0;i<resp.data.data.length;i++){
        let arr = JSON.stringify(resp.data.data[i]).replace(/personSex/, 'name').replace(/num/, 'value');
          newarr.push(JSON.parse(arr))
      }
     this.list1=  JSON.parse(JSON.stringify(newarr))
      console.log(this.list1)
      console.log(JSON.parse(JSON.stringify(newarr)))
      this.drawChart()
      });
    },
       getage(){
       this.tongyong({
        name: 'agerenshu',
        data: {
        },
      }).then(resp => {
        console.log(resp.data.data)
        let newarr=[]
      for(let i=0;i<resp.data.data.length;i++){
        let arr = JSON.stringify(resp.data.data[i]).replace(/ageLevel/, 'name').replace(/num/, 'value');
          newarr.push(JSON.parse(arr))
      }
     this.list1=  JSON.parse(JSON.stringify(newarr))
      console.log(this.list1)
      console.log(JSON.parse(JSON.stringify(newarr)))
      this.drawChart()
      });
    },
    pieConsole(param){
  if(this.type==1){
 this.tongyong({
        name: 'SELECT_keshipeople',
        data: {
         "sectionName": param.data.name
      },
      }).then(resp => {
        console.log(resp.data.data.list)
        if(resp.data.code==200){
        this.setlist(resp.data.data.list)
            this.$router.push({
         path:'Renshiguanli',
         }) 
        }

      });
  } else if(this.type==2){
      this.tongyong({
       name:'SELECT_allzhicheng',
  
     }).then((resp)=>{
       console.log(resp.data)
       for(let i=0;i<resp.data.data.length;i++){
         if(param.data.name==resp.data.data[i].titleName){
           this.tongyong({
        name: 'mohuselect_yuangong',
        data: {
          titleNo:resp.data.data[i].titleNo,
        },
      }).then(resp => {
        console.log(resp.data)
       if(resp.data.code==200)  {
        this.setlist(resp.data.data)
            this.$router.push({
         path:'Renshiguanli',
         })  
        } 
      });
      break;
         }
       }
     })
  }else if(this.type==4){
     console.log(param.data.personBaseList)
      this.setlist(param.data.personBaseList)
       this.$router.push({
         path:'Renshiguanli',
         }) 
  }else if(this.type==3){
     this.setlist(param.data.personBaseList)
       this.$router.push({
         path:'Renshiguanli',
         }) 
  }
    },
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      var option
      // 指定图表的配置项和数据
     option = {
       title: {
        text: '人数统计表',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '人数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: this.list1
        }
    ]
};
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option);
      myChart.on("click", this.pieConsole);
    }
     
  },
  mounted() {
     this.drawChart(); 
  },
  watch:{
    type(){
      if(this.type==1){
        this.getdata()
      }
      if(this.type==2){
       this.getzhicheng()
      }else if(this.type==3){
        this.getsex()
      }else if(this.type==4){
        this.getage()
      }
    }
  }
};
</script>
<style scoped>
#main{
  margin: 0 auto;
}
#choose{
  font-size: 16px;
  width: 100px;
  height: 30px;
 /*  margin-left: 100px; */
}
</style>